*{
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}
#header{
  height: 40px;
  box-sizing: border-box;
  padding: 8px;
  .left{ float: left; color: rgb(34, 93, 187); font-size: 18px;}
  .right{ float: right; }
}
#main{
  height: calc(100vh - 40px);
  padding-left:220px;
  position: relative;
}
#nav{
  width: 220px;
  position: absolute;
  left: 0px;
  top:0;
  height: 100%;
  box-sizing: border-box;
  padding: 4px;
  border-right: 1px solid #ccc;
  .category{
    border-bottom: 1px solid #eee;
  }
  .title{
    line-height: 24px;
    font-size: 16px;
    padding: 4px 8px;
    border-bottom: 1px solid rgb(160, 160, 160);
    background-color: rgb(128, 128, 128);
    color: #FFF;
    font-weight: bold;
  }
  .chart-item{
    padding: 4px 8px 4px 12px;
    cursor: pointer;
    &:hover, &[selected]{
      background-color: rgb(236, 236, 236);
    }
    &[selected]{
      border-left:2px solid rgb(7, 117, 200);
    }
  }
}
#editor, #chart{
  width: 50%;
  height: 100%;
  float: left;
}